<template>
    <div class="weightContainer">
        <div class="back" @click="goBack"></div>
        <div class="title"></div>
        <transition name="question" appear>
            <div class="question">
                <p class="choose" v-if="!isShow">选择您的体重</p>
                <p class="choose" v-if="isShow">目标体重</p>
                <p class="warning" v-if="!isShow">我们将使用这些数据</p>
                <p class="warning" v-if="!isShow">为您提供更好的改善计划</p>
                <p class="warning" v-if="isShow">已为您自动设置目标体重</p>
            </div>
        </transition>
        <div class="index" :style="setChangeIndex(isShow)"></div>
        <div :style="setActive(isShow)" class="currentWeight">
            <p class="myWeight">{{ myWeight }}</p>
            <p class="unit">kg</p>
        </div>
        <transition name="goto" appear>
            <p class="goto" v-if="isShow">>></p>
        </transition>
        <transition name="goal" appear>
            <p class="goalWeight" v-if="isShow">{{ myWeight-10 }}</p>
        </transition>
        <transition name="unit" appear>
            <p class="changeUnit" v-if="isShow">kg</p>
        </transition>
        <div class="inputContainer" v-if="!isShow">
            <van-field
                v-model="myWeight"
                label="填写体重"
                left-icon="smile-o"
                placeholder="请填写体重(kg)"
                @keyup.enter="handleSubmit"
            />
        </div>
        <div class="next" @click="gotoChange"></div>
    </div>
</template>

<script>
import { Field } from 'vant';
    export default {
        name:'myWeight',
        components:[Field],
        data(){
            return{
                myWeight:60,
                isShow:false,
                goalWeight:'',
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            gotoChange(){
                localStorage.setItem('currentWeight',this.myWeight)
                localStorage.setItem('targetWeight',this.goalWeight)
                if(this.isShow===true){
                    this.$router.push({
                        name:'height',
                    })
                }
                this.isShow=true
            },
            setActive(isShow){
                return isShow ? 'transform:translateX(-1.4rem); opacity:0.5' : 'transform:translateX(0); opacity:1'
            },
            setChangeUnit(isShow){
                return isShow ? 'transform:translateX(-1.4rem); opacity:0' : 'transform:translateX(0); opacity:1'
            },
            setChangeIndex(isShow){
                return isShow ? 'transform:translateX(1.4rem)' : 'transform:translateX(0rem)'
            },
            handleSubmit(){

            }
        }
    }
</script>


<style scoped>
    .weightContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        position: relative;
        overflow: hidden;
    }
    .back{
        background-image: url(../assets/img/0-icon@2x/0-18back.png);
        width: 0.48rem;
        height: 0.48rem;
        position: absolute;
        background-position: center;
        background-size: contain;
        top:1.12rem;
        left:.64rem;
    }
    .title{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-11bodyData.png);
        width: 1.28rem;
        height: .68rem;
        background-position: center;
        background-size: contain;
        left: 3.1rem;
        top: 1.08rem;
    }
    .question{
        position: absolute;
        color: #333333;
        top: 2.28rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .question .choose{
        font-size: 0.45rem;
        font-family: 'PingFangSC-Mediuem';
        transition: all 0.5s;
    }
    .question .warning{
        font-size: 0.26rem;
        font-family: 'PingFangSC-Regular';
        color: #747474;
        transition: all 0.5s;
    }
    .index{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-22indexicon.png);
        width: 0.32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
        top:5.5rem;
        left: 3.58rem;
        transition: all 0.5s;
    }
    .currentWeight{
        width: 100%;
        margin: 0 auto;
        margin-top: 327px;
        transition: all 0.5s;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .myWeight{
        color: #333333;
        font-size: 0.8rem;
        font-family: 'PingFangSC-Mediuem';
    }
    .goto{
        position: absolute;
        font-family: 'PingFangSC-Mediuem';
        font-size: 0.25rem;
        color: #333333;
        left: 3.63rem;
        top:6.8rem;
        transform: translateX(0rem) scaleY(2);
    }
    .goalWeight{
        color: #333333;
        font-size: 0.8rem;
        font-family: 'PingFangSC-Mediuem';
        position: absolute;
        left: 3.28rem;
        top:6.5rem;
        transform: translateX(1.4rem);
    }
    .unit{
        font-family: 'PingFangSC-Regular';
        color: #333333;
        font-size: 0.35rem;
    }
    .changeUnit{
        position: absolute;
        font-family: 'PingFangSC-Regular';
        color: #333333;
        top:6.95rem;
        left: 4.5rem;
        font-size: 0.35rem;
        transform: translateX(1.4rem);
    }
    .next{
        background-image: url(../assets/img/0-icon@2x/0-20next.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
    .goto-enter{
        transform: translateX(-1rem) scaleY(2);
        opacity: 0;
    }
    .goto-enter-to{
        transform: translateX(0rem) scaleY(2);
        opacity: 1;
    }
    .goto-enter-active{
        transition: 0.5s;
    }
    .goal-enter{
        transform: translateX(0rem);
        opacity: 0;
    }
    .goal-enter-to{
        transform: translateX(1.4rem);
        opacity: 1;
    }
    .goal-enter-active{
        transition: 0.5s;
    }
    .unit-enter{
        transform: translateX(0rem);
        opacity: 0;
    }
    .unit-enter-to{
        transform: translateX(1.4rem);
        opacity: 1;
    }
    .unit-enter-active{
        transition: 0.5s;
    }
    .inputContainer{
        margin: 0 auto;
        width: 300px;
        margin-top: 60px;
    }
</style>
